<script setup>

import { reactive, toRefs, onMounted, ref } from 'vue'
import api from '@/api'
import { ElMessage } from 'element-plus'

const dic = [
    '',
                        'finance',
                        'operate',
                        'production',
                        'delivery',
                        'receive',
                        'repairs',
                        'repairAndAccept',
                        'recovery',

                    ]
// 获取部门id
const href = window.location.href
let id = dic.indexOf(href.slice(href.lastIndexOf('/') + 1, href.length))
console.log(id)
const data = reactive({
    drawer: false,
    formSearch: {
        id: '',
        name: '',
        status: ''
    },
    tableData: [],
    formData: {
        account: '',
        name: '',
        pwd: '',
        deptIds: id,
        status: '',
        state: '',
        id: ''
    }
})


const onSubmit = () => {
    return new Promise((resolve, reject) => {
        api.post('api/mgr/userList', {
            deptId: id,
            name: data.formSearch.name
        }).then(res => {

            data.tableData = res.d.records.map(i => {
                return {
                    id: i.id,
                    name: i.name,
                    status: i.status ? '正常' : '失效'
                }
            })

            console.log(data.tableData)
            
            resolve()
        })
    })
        
}

const submit = state => {
        
    switch (state) {
        case 0:
            api.post('api/mgr/userAdd', {
                account: data.formData.account,
                name: data.formData.name,
                pwd: data.formData.pwd,
                deptIds: data.formData.deptIds,
                status: data.formData.status
            })
                .then(res => {
                    if (res.c === 0) {
                        ElMessage({
                            message: '添加成功',
                            type: ''
                        })
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }
                })
            break
        case 1:
            api.post('api/mgr/userEdit', {
                id: data.formData.id,
                name: data.formData.name,
                deptIds: data.formData.deptIds,
                status: data.formData.status
            })
                .then(res => {
                    if (res.c === 0) {
                        ElMessage({
                            message: '修改成功',
                            type: ''
                        })
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }
                })
            break
        case 2:
            api.post('api/mgr/userDelete', {
                id: data.formData.id
            })
                .then(res => {
                    if (res.c === 0) {
                        ElMessage({
                            message: '删除成功',
                            type: ''
                        })
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }
                })
            break
        default:
            break
    }
}

const tableRef = ref()

const handleCurrentChange = (currentRow, oldCurrentRow) => {
    tableRef.value.setCurrentRow(currentRow)
    data.formData.id = currentRow.id
    data.formData.name = currentRow.name
    data.formData.status = currentRow.status
}

onSubmit()

const { formSearch, tableData, formData, drawer } = toRefs(data)

</script>

<template>
    <div class="content">
        <page-main>
            <div id="form">
                <div>
                    <el-form 
                    :inline="true" :model="formSearch" class="demo-form-inline" size="mini">
                        <el-form-item label="姓名">
                            <el-input  v-model="formSearch.name" style="width: 80px" placeholder="输入姓名" />
                        </el-form-item>
                        
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">查询</el-button>
                        </el-form-item>
                    </el-form>
                </div>

                <el-table
                    ref="tableRef"
                    :data="tableData" :cell-style="rowClass"
                    style="width: 330px;height:350px;font-size: 10px;"
                    highlight-current-row
                    @current-change="handleCurrentChange"
                >
                    <el-table-column
                        fixed
                        prop="id"
                        label="ID"
                        width="60px"
                    />
                    <el-table-column
                        fixed
                        prop="name"
                        label="姓名"
                        width="120px"
                    />
                    <el-table-column
                        fixed
                        prop="status"
                        label="状态"
                        width="120px"
                    />
                </el-table>

                <!-- <el-button type="primary" style="margin-top: 20px;" @click="drawer = true">人员操作</el-button> -->

                <!-- <el-drawer
                    v-model="drawer"   
                    title="操作"			
                    direction="rtl"
                    custom-class="demo-drawer"
                    size="30%"
                > -->
                <el-card style="margin-top: 40px;">
                    <el-form>
                        
                            

                

                            <el-form-item label="名&nbsp&nbsp&nbsp称">
                                <el-input  v-model="formData.name" />
                            </el-form-item>
<!-- 
                            <el-form-item label="部门ID" placeholder="关联部门id，多个以英文逗号分">
                                <el-input  v-model="formData.deptIds" />
                            </el-form-item> -->

                            <el-form-item label="状&nbsp&nbsp&nbsp态">
                                <el-select v-model="formData.status" placeholder="请选择账户状态">
                                    <el-option label="失效" value="0" />
                                    <el-option label="正常" value="1" />
                                </el-select>
                            </el-form-item>
                        

                        <el-form-item>
                            <el-button type="primary" :loading="loading" @click="submit(0)">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>
                            <el-button type="primary" :loading="loading" @click="submit(1)">修&nbsp;&nbsp;&nbsp;&nbsp;改</el-button>
                            <el-button type="primary" :loading="loading" @click="submit(2)">删&nbsp;&nbsp;&nbsp;&nbsp;除</el-button>
                        </el-form-item>
                    </el-form>
                <!-- </el-drawer> -->
                </el-card>
            </div>
        </page-main>
    </div>
</template>

<style>
   
</style>